import React, { Fragment } from 'react';
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';


const TodoListUI = (props) => {
    return (
        <Fragment>
            <div style={{ margin: "10px" }}>
                <Input
                    value={props.inputValue}
                    placeholder="todo info"
                    style={{ width: '300px', margin: '10px' }}
                    onChange={props.handleInputChange}
                ></Input>
                <Button
                    type="primary"
                    onClick={props.handleButtonClick}
                >提交</Button>
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item, index) => <List.Item onClick={() => {props.handleItemDelete(index)}}>{item}</List.Item>}
                    style={{ margin: "10px", width: "300px" }}
                />
            </div>
        </Fragment>
    )
}

export default TodoListUI